<template>
	<view class="container">
		<view class="top" :style="{'background':templateConfig.page.themeColor}">
			<view class="title">
				排行榜
			</view>
			<view class="image">
				<image src="https://oss.daccf.com/nz24iwd4izjuiy6tngha6/公共/50023879-73a4-459e-b8ba-064e5b762fe1.png" mode=""></image>
			</view>
		</view>
		
		<view class="ranking_box">
			
			<u-sticky :offset-top="0">
				<view class="myself">
					<view class="name_box">
						<view class="name_text">我</view>
						<view class="name_name_img_box">
							<image class="head_icon" src="https://img0.baidu.com/it/u=2237751113,1810696268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
							<view class="name_name">{{rankingMyself.name}}</view>
						</view>
					</view>
					<view class="ranking_text">
						<text>第{{rankingMyself.ranking}}名</text>
					</view>
					<view class="income">
						<text>{{rankingMyself.incomeMoney}}元</text>
					</view>
				</view>
				
				<view class="ranking_title">
					<view class="name_box">
						<view class="name_text">排名</view>
						<view class="name_name_img_box">昵称</view>
					</view>
					<view class="income">佣金</view>
				</view>
				
			</u-sticky>
			
			
			
			<view class="ranking_list">
				<view class="list_item" v-for="(item, index) in rankingList" :key="index">
					<view class="name_box">
						<view class="ranking_icon_box" v-if="index < 3">
							<image class="ranking_icon_img" :src="setImage(index + 1)" mode="aspectFill"></image>
						</view>
						<view class="ranking_icon_box" v-else>
							<view class="ranking_num">{{index + 1}}</view>
						</view>
						<view class="name_name_img_box">
							<image class="head_icon" src="https://img0.baidu.com/it/u=2237751113,1810696268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
							<view class="name_name">{{item.name}}</view>
						</view>
					</view>
					
					<view class="income">
						<text>{{item.incomeMoney}}元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				rankingMyself: {
					headImg: '',
					name: '丢丢',
					incomeMoney: '85',
					uid: '888888',
					ranking: '40'
				},
				rankingList: [
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888888'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
					{
						headImg: '',
						name: '丢丢',
						incomeMoney: '200',
						uid: '888881'
					},
				],
				
			};
		},
		computed: {
			setImage () {
				return function (index) {
					if (!index) return;
					let url = `../../../static/images/distribution/ranking${index}.png`
					return url;
				}
			}
		},
		onLoad() {
			this.templateConfig= uni.getStorageSync('templateConfig')
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor:this.templateConfig.page.themeColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container{
		width: 100%;
		
		.top{
			height: 260rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 100rpx;
			box-sizing: border-box;
			
			.title{
				color: #fff;
				font-size: 90rpx;
				font-weight: bold;
			}
			
			.image{
				width: 200rpx;
				height: 200rpx;
			}
		}
		
		.ranking_box{
			padding: 20rpx;
			margin-top: 20rpx;
			
			.myself{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				background-color: #FEF6E1;
				border-radius: 20rpx;
				
				.name_box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.name_text{
						color: #EE942C;
						font-size: 28rpx;
						margin-right: 40rpx;
					}
					.name_name_img_box{
						display: flex;
						align-items: center;
						
						.head_icon{
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
							border-radius: 40rpx;
						}
						.name_name{
							font-size: 28rpx;
						}
					}
				}
				.ranking_text{
					color: #EE942C;
					font-size: 28rpx;
				}
				.income{
					color: #EE942C;
					font-size: 28rpx;
				}
			}
			
			.ranking_title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 40rpx 20rpx 26rpx;
				color: #B1B4C3;
				background-color: #f7f7f7;
				
				.name_box{
					display: flex;
					align-items: center;
					
					.name_text{
						font-size: 28rpx;
						margin-right: 124rpx;
					}
					.name_name_img_box{
						display: flex;
						align-items: center;
						
						.head_icon{
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
							border-radius: 40rpx;
						}
						.name_name{
							font-size: 28rpx;
						}
					}
				}
			}
			
			.ranking_list{
				
				
				.list_item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 40rpx 30rpx 32rpx;
					box-sizing: border-box;
					
					.name_box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.ranking_icon_box{
							width: 40rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 38rpx;
							
							.ranking_icon_img{
								width: 40rpx;
								height: 40rpx;
							}
							
							.ranking_num{
								color: #B1B4C3;
								font-size: 30rpx;
							}
						}
						
						
						
						.name_name_img_box{
							display: flex;
							align-items: center;
							
							.head_icon{
								width: 80rpx;
								height: 80rpx;
								margin-right: 16rpx;
								border-radius: 40rpx;
							}
							.name_name{
								font-size: 28rpx;
							}
						}
					}
					.income{
						color: #EE942C;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
